---
import Layout from '../../../layouts/Layout.astro';
import ProductCard from '../../../components/ProductCard.astro';
import { getProductsFromDB, getBrandBySlugFromDB, getModelsByBrand } from '../../../lib/products';

const { slug, model: modelSlug } = Astro.params;
const dbBrand = await getBrandBySlugFromDB(slug!);
if (!dbBrand) return Astro.redirect('/merken');

const brandName = dbBrand.name;

// Find model name from slug
const models = await getModelsByBrand(slug!);
const modelInfo = models.find(m => m.slug === modelSlug);
if (!modelInfo) return Astro.redirect(`/merken/${slug}`);

const modelName = modelInfo.name;
const products = await getProductsFromDB({ limit: 48, brand: slug!, model: modelName });

const title = `${brandName} ${modelName} — Vergelijk Prijzen | SneakerPicks`;
const description = `Vergelijk ${brandName} ${modelName} prijzen bij Nederlandse webshops. ${products.length} varianten beschikbaar.`;
---

<Layout title={title} description={description}>
  <section class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-accent/5 via-transparent to-transparent"></div>
    <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6">
      <nav class="mb-4 text-sm text-text-muted">
        <a href="/merken" class="hover:text-accent transition-colors">Merken</a>
        <span class="mx-2">/</span>
        <a href={`/merken/${slug}`} class="hover:text-accent transition-colors">{brandName}</a>
        <span class="mx-2">/</span>
        <span class="text-text-secondary">{modelName}</span>
      </nav>
      <h1 class="text-4xl font-black tracking-tight sm:text-5xl">{brandName} {modelName}</h1>
      <p class="mt-2 text-text-secondary">{products.length} sneakers gevonden · Prijzen vergelijken</p>
    </div>
  </section>

  <section class="mx-auto max-w-7xl px-4 pb-16 sm:px-6">
    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {products.map((sneaker, i) => (
        <ProductCard sneaker={sneaker} index={i} />
      ))}
    </div>

    {products.length === 0 && (
      <div class="py-20 text-center">
        <p class="text-lg text-text-muted">Geen sneakers gevonden voor {brandName} {modelName}.</p>
      </div>
    )}
  </section>
</Layout>